<template>
	<view class="container">
		<!-- banner -->
		<view class="banner border-radio">
			<z-swiper grabCursor>
				<z-swiper-item v-for="item in banner" :key="item.id">
					<view class="swiper-item">
						<image :src="item.url" mode="scaleToFill"></image>
					</view>
				</z-swiper-item>
			</z-swiper>
		</view>
		<!-- 公司简介 -->
		<view class="intro border-radio">
			<view class="intro-icon">
				<image src="http://mms1.baidu.com/it/u=3844000760,156912005&fm=253&app=138&f=PNG?w=171&h=171"
					mode="widthFix"></image>
			</view>
			<view class="intro-info">
				<view class="info">
					<view class="info-title">{{info.title}}</view>
					<view class="info-more iconfont icon-gengduo"></view>
				</view>
				<view class="desc"> {{info.desc}}</view>
			</view>
		</view>
		<!-- 入职入口 -->
		<view class="entry-entrance border-radio">
			<view class="entry-left">
				<view class="entry-title">员工<text>入职办理入口</text></view>
				<view class="entry-desc">欢迎您的加入</view>
			</view>
			<view class="entry-icon">
				<image src="http://mms2.baidu.com/it/u=3883926151,2482732257&fm=253&app=138&f=PNG?w=500&h=583"
					mode="widthFix"></image>
			</view>
		</view>
		<!-- 特色服务 -->
		<view class="characteristic-service border-radio">
			<view class="title">特色服务</view>
			<view class="content">
				<view class="content-left border-radio">
					<image src="http://mms0.baidu.com/it/u=2429863885,2066869066&fm=253&app=138&f=PNG?w=475&h=373"
						mode="widthFix"></image>
					<view class="box-title">财税计算器</view>
					<view class="box-desc">算一算你的税后工资</view>
				</view>
				<view class="content-right">
					<view class="hint-box border-radio">
						<image src="http://mms2.baidu.com/it/u=440837802,989893420&fm=253&app=138&f=PNG?w=219&h=123"
							mode="widthFix"></image>
						<view>
							<view class="box-title">业务办理</view>
							<view class="box-desc">相关业务须知</view>
						</view>
					</view>

					<view class="hint-box border-radio">
						<image src="http://mms0.baidu.com/it/u=4136544250,2623979470&fm=253&app=138&f=PNG?w=285&h=285"
							mode="widthFix"></image>
						<view>
							<view class="box-title">业务咨询</view>
							<view class="box-desc">相关业务咨询</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const banner = ref([{
			id: 1,
			url: 'http://www.yjhh.com/images/banner.jpg'
		},
		{
			id: 2,
			url: 'http://mms0.baidu.com/it/u=2667062503,2339897958&fm=253&app=138&f=PNG?w=888&h=378'
		}
	])
	const info = ref({
		title: '云基华海',
		desc: '云基华海信息技术股份有限公司作为国内首家提出数据资产运营理念、第一个落地数据要素流通平台的公司，致力于成为数据要素领域头部厂商。'
	})
</script>

<style lang="scss" scoped>
	.border-radio {
		border-radius: 10upx;
		overflow: hidden;
	}

	view.container {
		padding: 10upx 20upx;

		// banner
		view.banner {
			view.swiper-item {
				width: 100%;

				image {
					width: 100%;
				}
			}
		}

		// 公司简介
		view.intro {
			background-image: linear-gradient(to right, #d9e5ff, #fff);
			display: flex;
			align-items: center;
			justify-content: space-between;

			view.intro-icon {
				image {
					width: 150upx;
				}
			}

			view.intro-info {
				margin-left: 100upx;

				view.info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 20upx;
					view.info-title {
						color: #55ddff;
						font-size: 28upx;
					}

					view.info-more {
						color: #55ddff;
						font-size: 28upx;
					}
				}

				view.desc {
					margin-top: 15upx;
					font-size: 26upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 430upx;
				}
			}
		}

		view.entry-entrance {
			background-color: #f0eff3;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx;

			view.entry-left {
				view.entry-title {
					font-weight: bold;
					letter-spacing: 3upx;

					text {
						color: #55ddff;
					}
				}

				view.entry-desc {
					margin-top: 20upx;
					font-size: 20upx;
					color: #aaaaaa;
				}
			}

			view.entry-icon {
				image {
					width: 200upx;
				}
			}
		}

		view.characteristic-service {
			view.title {
				color: #333;
				font-size: 22upx;
				font-weight: bold;
				padding-left: 10upx;
				border-left: 5upx solid #55ddff;
				margin-left: 5upx;
			}

			view.content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view.box-title {
					font-weight: bold;
				}

				view.box-desc {
					font-size: 18upx;
					color: #aaaaaa;
					margin-top: 10upx;
				}

				view.content-left {
					width: 49%;
					background-image: linear-gradient(to bottom, #d9feff, #edf9f2);
					height: 500upx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image {
						margin-bottom: 30upx;
						width: 280upx;
					}

				}

				view.content-right {
					width: 49%;

					view.hint-box {
						height: 240upx;
						background-image: linear-gradient(to bottom, #d9feff, #edf9f2);
						display: flex;
						align-items: center;
						justify-content: space-around;

						image {
							width: 180upx;
						}
					}

					view.hint-box+view.hint-box {
						margin-top: 20upx;
					}
				}
			}
		}
	}
</style>